<template>
    <div>
        <h2>子组件</h2>
    </div>
</template>

<script lang="ts">
import { defineComponent,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted } from 'vue';


export default defineComponent({
    setup () {
        onBeforeMount( ()=>{
            console.log('父组件的onBeforeMount');
            
        });
        onMounted( ()=>{
            console.log('父组件的onMounted');
            
        });
        onBeforeUpdate( ()=>{
            console.log('父组件的onBeforeUpdate');
            
        });
        onUpdated( ()=>{
            console.log('父组件的onUpdates');
            
        });
        onBeforeUnmount( ()=>{
            console.log('父组件的onBeforeUnmount');
            
        });
        onUnmounted( ()=>{
            console.log('父组件的onUnmounted');
            
        });

        return {};
    },
    beforeCreate(){
        console.log('子组件的beforeCerate');
        
    },
    created(){
        console.log('子组件的cerated');
        
    },
    beforeMount(){
        console.log('子组件的beforeMount');
        
    },
    mounted(){
        console.log('子组件的mounted');
        
    },
    beforeUpdate(){
        console.log('自组建的boforeupdate');
        
    },
    updated(){
        console.log('子组件的updated');
        
    },
    beforeUnmount(){
        console.log('子组件的updated');
        
    },
    unmounted(){
        console.log('子组件的unmounted');
        
    }
})
</script>

<style scoped>

</style>